<template>
  <div class="VGrid">
    <h1>This is an VGrid page</h1>
    <a-row>
      <a-col :span="24"> col-24</a-col>
    </a-row>
    <a-row>
      <a-col :span="12"> col-12</a-col>
      <a-col :span="12"> col-12</a-col>
    </a-row>
    <a-row>
      <a-col :span="6"> col-6</a-col>
      <a-col :span="6"> col-6</a-col>
      <a-col :span="6"> col-6</a-col>
      <a-col :span="6"> col-6</a-col>
    </a-row>
    <a-row type="flex" justify="space-between" align="middle">
      <a-col :span="4">
        <p class="height-100">
          col-4
        </p>
      </a-col>
      <a-col :span="4">
        <p class="height-50">
          col-4
        </p>
      </a-col>
      <a-col :span="4">
        <p class="height-120">
          col-4
        </p>
      </a-col>
      <a-col :span="4">
        <p class="height-80">
          col-4
        </p>
      </a-col>
    </a-row>
    <a-divider orientation="left">
      Percentage columns
    </a-divider>
    <a-row type="flex">
      <a-col :flex="2">2 / 5</a-col>
      <a-col :flex="3">3 / 5</a-col>
    </a-row>
    <a-divider orientation="left">
      Fill rest
    </a-divider>
    <a-row type="flex">
      <a-col flex="100px">100px</a-col>
      <a-col flex="auto">auto</a-col>
    </a-row>
    <a-divider orientation="left">
      Raw flex style
    </a-divider>
    <a-row type="flex" :gutter="16">
      <a-col flex="1 1 200px">1 1 200px</a-col>
      <a-col flex="0 1 300px">0 1 300px</a-col>
    </a-row>
    <a-divider orientation="left">
      Raw offset
    </a-divider>
    <a-row>
      <a-col :span="8">
        col-8
      </a-col>
      <a-col :span="8" :offset="8">
        col-8
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="12" :offset="6">
        col-12 col-offset-6
      </a-col>
    </a-row>

    <a-row :gutter="[16, 16]">
      <a-col :span="6" />
      <a-col :span="6" />
      <a-col :span="6" />
      <a-col :span="6" />
    </a-row>
  </div>
</template>
